<template>
  <PageWrapper>
    <div class="bg">
      <BasicTable
        @register="registerTable"
        :rowSelection="{ type: 'checkbox', selectedRowKeys: checkedKeys, onChange: onSelectChange }"
      >
        <template #form-custom> custom-slot </template>
        <template #headerTop>
          <a-alert type="info" show-icon>
            <template #message>
              <template v-if="checkedKeys.length > 0">
                <span>已选中{{ checkedKeys.length }}条记录(可跨页)</span>
                <a-button type="link" @click="checkedKeys = []" size="small">清空</a-button>
              </template>
              <template v-else>
                <span>未选中任何项目</span>
              </template>
            </template>
          </a-alert>
        </template>
        <template #toolbar>
          <a-button type="primary" @click="getFormValues">获取表单数据</a-button>
        </template>
      </BasicTable>
    </div>
  </PageWrapper>
</template>

<script lang="ts" setup name="assemblyTable">
import { reactive, ref, computed } from 'vue'
import PageWrapper from '@/components/PageWrapper/index.vue'
import { BasicTable, useTable } from '@/components/Table'
import { getBasicColumns, getBasicData, getFormConfig } from './tableData'
import { message } from 'ant-design-vue'
import api from '@/api'
const { getTableData } = api

const checked = ref(true)
const checkedKeys = ref<Array<string | number>>([])
const [registerTable, { getForm }] = useTable({
  title: '开启搜索区域',
  api: getTableData,
  columns: getBasicColumns(),
  useSearchForm: true,
  formConfig: getFormConfig(),
  showTableSetting: true,
  tableSetting: { fullScreen: true },
  showIndexColumn: false,
  rowKey: 'id'
})

function getFormValues() {
  console.log(getForm().getFieldsValue())
}

function onSelectChange(selectedRowKeys: (string | number)[]) {
  console.log(selectedRowKeys)
  checkedKeys.value = selectedRowKeys
}
</script>

<style lang="less" scoped>
.bg {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
